<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- <link rel="stylesheet" href="../css/theme-b.css"> -->
    </head>
    <body>
        <!-- 
            div =>    标签名/标记/元素(二阶段)
            class="" id="" title=""  => 属性(标签的html属性 => 写在标签内和标签名一个空格分隔的叫做属性, 属性可以没有, 也可以有多个,多个属性之间用空格分隔)
            123123   => 文本  
                        注释
        -->
        <div class="one two three" id="box" title="hello" data-id="0" data-msg="xxx">
            <span>
                123123
            </span>
            <!-- 123123 -->
        </div>

        <input class="inp" type="text">
        <button class="btn">禁用</button>

        <!-- <video src="" controls  autoplay loop muted></video> -->
    </body>
<script>
    // 元素节点  -> 对象类型(对象:对一个或一类事物特征和行为的描述, 以键值对的形式存在 => 属性和方法) => 元素节点的属性和方法(特性)
    var box = document.getElementById("box");  // 元素节点   对象类型
    // console.log(box);
    console.dir(box);   // 以键值对的形式打印对象  => 查看的就是元素节点(对象)的属性

    // 元素节点的属性   => 元素节点是一个对象 -> 存在描述该元素的属性,和操作元素的方法 
    // 通用属性
    // box.id            获取和设置元素的id
    // box.className     获取和设置元素的id
    // box.classList  (add  remove replace  contains  toggle )

    // box.classList.replace("two","TWO");  // 将class列表中某个class名替换为新的class名
    // console.log(box.classList.contains("one"));
    // console.log(box.classList.contains("two"));

    // title   获取和设置元素的title
    // tagName  获取元素的标签名
    
    // style  获取和设置元素的样式 (只能获取内联)
    // getComputedStyle(box)["width"]  => 获取非行内样式(方法)
    
    // innerHTML   获取和设置元素内的html结构(html标签+text)
    // innerText   获取和设置元素内的text结构
    // textContent 获取和设置元素内的text结构
    // value       获取和设置元素内的value (表单元素)

    // 拓展 (某些元素独有的属性)
    // href  获取和设置元素href属性(a link)  
    // src   获取和设置元素src属性(img script)  

    // 表单
    // value
    // name 
    // type 
    // placeholder 
    
    // 表单状态相关的
    // disabled  获取和设置表单元素是否禁用 (true:禁用  false:可用)
    // required  获取和设置表单元素是否必填 (true:必填 false:选填 -> 必须在form)
    // checked   获取和设置表单元素(radio checkbox)是否选中

    // 视频 音频 相关的状态
    // controls  
    // autoplay
    // loop 
    // muted


    var inp = document.getElementsByClassName("inp")[0];
    var btn = document.getElementsByClassName("btn")[0];

    btn.onclick = function(){
        if(inp.disabled == false){ // 没有禁用
            inp.disabled = true;
            this.innerText = "解禁"
        }else{// 已经禁用
            inp.disabled = false;
            this.innerText = "禁用"
        }
    }
    


</script>
</html>